/**
 * @Author: leezhihua on 2018/6/22
 * @Date: 2019-08-16 16:00:17
 * @Last Modified by: yu_meng_cheng@163.com
 * @Last Modified time: 2019-08-21 20:53:12
 */


'use strict';

import React, {Component} from 'react';
import {StyleSheet, View, Text, Image, TextInput, ViewPropTypes} from 'react-native';
import PropTypes from 'prop-types';
import Potato from '@greens/potato/src/potato';
import Device from "@greens/device/src/device";

export default class ItemSearchBar extends Potato {
    constructor(props) {
        super(props);
        this.state = {text: ''};
        this.searchTextInput;
    }

    pageDidInitialed() {
        super.pageDidInitialed();
        if (this.searchTextInput != null) {
            if (Device.isIOS) {
                this.searchTextInput.focus();
            }
        }
    }

    textInputFocus() {
        setTimeout(() => {
            if (this.searchTextInput && !this.searchTextInput.isFocused()) {
                if (Device.isIOS) {
                    this.searchTextInput.focus();
                }
            }
        }, 0);
    }

    componentWillReceiveProps(props) {
        if (props.enableSearchInput && props.enableSearchInput !== this.props.enableSearchInput) {
            this.textInputFocus();
        }
    }

    // static getDerivedStateFromProps(props, state) {
    // }

    render() {
        return (
            <View style={[styles.header, this.props.style]}>
                <View style={[styles.search, this.props.searchStyle]}>
                    <Image style={styles.searchIcon} source={require('./search.png')}/>
                    {this.props.enableSearchInput ? (
                        <TextInput
                            ref={self => (this.searchTextInput = self)}
                            style={styles.searchInput}
                            placeholder={this.props.placeholder}
                            placeholderTextColor={'#8B8B8B'}
                            underlineColorAndroid="transparent"
                            clearButtonMode={'while-editing'}
                            autoFocus={Device.isAndroid ? this.props.autoFocus : false}
                            returnKeyType={'search'}
                            onChangeText={text => {
                                this.setState({text: text}, () => {
                                    this.props.onChangeText && this.props.onChangeText(text);
                                });
                            }}
                            onSubmitEditing={() => this.props.onSearch && this.props.onSearch(this.state.text)}
                            onBlur={() => {
                                this.props.onBlur && this.props.onBlur(this.state.text);
                            }}
                            defaultValue={this.props.content}
                        />
                    ) : (
                        <Text style={[styles.searchInput, {color: '#8B8B8B', flex: 0}]} onPress={this.props.onSearch}>
                            {this.props.placeholder}
                        </Text>
                    )}
                    {this.props.accessoryComponent}
                </View>
                {this.props.showCancel && (
                    <Text style={styles.cancel} onPress={this.props.onCancel}>
                        取消
                    </Text>
                )}
            </View>
        );
    }
}

ItemSearchBar.propTypes = {
    style: ViewPropTypes.style,
    showCancel: PropTypes.bool,
    enableSearchInput: PropTypes.bool,
    onChangeText: PropTypes.func,
    onSearch: PropTypes.func,
    onCancel: PropTypes.func,
    placeholder: PropTypes.string,
    onBlur: PropTypes.func,
    accessoryComponent: PropTypes.element,
    content: PropTypes.string,
    autoFocus: PropTypes.bool,
};
ItemSearchBar.defaultProps = {
    showCancel: false,
    enableSearchInput: false,
    autoFocus:true,
};

const styles = StyleSheet.create({
    header: {
        height: 35,
        marginLeft: 10,
        marginRight: 10,
        flexDirection: 'row',
        alignItems: 'center'
    },
    search: {
        flexDirection: 'row',
        alignItems: 'center',
        backgroundColor: '#F5F5F5',
        borderRadius: 17.5,
        height: 35,
        flex: 1
    },
    searchIcon: {
        width: 14,
        height: 14,
        marginLeft: 10
    },
    searchInput: {
        fontSize: 15,
        flex: 1,
        marginLeft: 5,
        marginRight: 10,
        padding: 0
    },
    cancel: {
        marginLeft: 5,
        color: '#444444',
        fontSize: 16
    }
});
